<template>
    <Echarts ref="echartsRef" :option="option" />
</template>

<script setup>
import { ref, reactive, watch, nextTick } from "vue"

import $color from "@/color"

import echarts from "@/components/Echarts/utils/echarts.min.js"
import Echarts from "@/components/Echarts/Echarts.vue"

const props = defineProps({
    caption: {
        type: Object,
        default: () => null
    },
    details: {
        type: Object,
        default: () => ({})
    }
})

const echartsRef = ref(null)
const option = reactive({})

watch(() => props.details, async ({ code }) => {
    await nextTick()
    if (!code) return false
    renderChart()
}, { immediate: true, deep: true })

const renderChart = async () => {
    let { details } = props

    let { code = "", transaction = [], calculate: { macd: { macd = [] }, kd: { k = [], d = [] } }, analysis = {} } = details

    const axisCommon = { axisLine: { show: false }, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false } }

    // 用 markArea 标注背离
    const markAreaDivergence = (() => {
        let result = {
            markArea: {
                silent: true,
                data: []
            }
        }
        let { bottom, top } = analysis.divergence

        if (bottom) {
            let style = {
                label: {
                    position: "inside",
                    formatter: `底背离[${bottom.range.length}]`,
                    fontWeight: "bold",
                    fontSize: 10,
                    color: $color.downColor
                },
                itemStyle: {
                    borderWidth: 0.8,
                    borderType: "dashed",
                    borderColor: $color.downBorderColor,
                    color: $color.downBackgroundColor
                },
            }
            result.markArea.data.push([
                { xAxis: bottom.range.at(0), ...style },
                { xAxis: bottom.range.at(-1), ...style }
            ])
        }
        if (top) {
            let style = {
                label: {
                    position: "inside",
                    formatter: `顶背离[${top.range.length}]`,
                    fontWeight: "bold",
                    fontSize: 10,
                    color: $color.upColor
                },
                itemStyle: {
                    borderWidth: 0.8,
                    borderType: "dashed",
                    borderColor: $color.upBorderColor,
                    color: $color.upBackgroundColor
                },
            }
            result.markArea.data.push([
                { xAxis: top.range.at(0), ...style },
                { xAxis: top.range.at(-1), ...style }
            ])
        }
        return result
    })()

    // 用于显示自定义信息
    const graphic = (() => {
        let { caption } = props

        let result = {}

        let elements = []

        if (caption) {
            let { title, k, percentage } = caption

            let object = {
                type: "rect",
                x: 0,
                y: 0,
                z: 9,
                shape: {
                    width: 100,
                    height: 62
                }
            }

            if (k < 20) {
                object.style = {
                    fill: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                            { offset: 0, color: $color.downColor },
                            { offset: 1, color: "rgba(0, 0, 0, 0)" }
                        ]
                    )
                }
            }
            else if (k > 80) {
                object.style = {
                    fill: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                            { offset: 0, color: $color.upColor },
                            { offset: 1, color: "rgba(0, 0, 0, 0)" }
                        ]
                    )
                }
            }
            else {
                object.style = {
                    fill: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                            { offset: 0, color: "#161922" },
                            { offset: 1, color: "rgba(0, 0, 0, 0)" }
                        ]
                    )
                }
            }
            elements.push(object)

            if (caption.title) {
                elements.push({
                    type: "text",
                    x: 15,
                    y: 10,
                    z: 9,
                    style: {
                        text: title,
                        fontWeight: "bold",
                        fontSize: 20,
                        fill: "#fff"
                    }
                })
            }

            if (caption.k) {
                elements.push({
                    type: "text",
                    x: 15,
                    y: 35,
                    z: 9,
                    style: {
                        text: `${k ? k : ""}  ${percentage ? percentage + "%" : ""}`,
                        fontWeight: "bold",
                        fontSize: 10,
                        fill: "#fff"
                    }
                })
            }
        }

        result.elements = elements

        return result
    })()

    let timeData = []
    let macdData = []
    let kData = []

    macd.forEach((item, index) => {
        timeData.push(index)
        macdData.push({ value: item, itemStyle: { color: item > 0 ? $color.upColor : $color.downColor } })

        kData.push(k[index])
    });

    Object.assign(option, {
        animation: false,
        grid: [
            { top: "0.5%", left: 0, right: 0, bottom: "0.5%" },
            { top: "0.5%", left: 0, right: 0, bottom: "0.5%" }
        ],
        xAxis: [
            { type: 'category', data: timeData, gridIndex: 0, ...axisCommon },
            { type: 'category', data: timeData, gridIndex: 1, ...axisCommon },
        ],
        yAxis: [
            { type: 'value', gridIndex: 0, ...axisCommon },
            { type: 'value', gridIndex: 1, min: 0, max: 100, ...axisCommon },
        ],
        series: [
            { name: 'macd', type: 'bar', xAxisIndex: 0, yAxisIndex: 0, data: macdData, ...markAreaDivergence },
            // 折线图系列
            {
                name: 'kd-k', type: 'line', xAxisIndex: 1, yAxisIndex: 1, data: kData, silent: true, lineStyle: {
                    width: 0.8, color: "rgba(255, 255, 255, 0.6)"
                }, showSymbol: false, markLine: { silent: true, symbol: 'none', label: { show: false }, data: [{ xAxisIndex: 2, yAxisIndex: 2, yAxis: 80, lineStyle: { color: $color.upBorderColor, type: 'dashed' } }, { xAxisIndex: 2, yAxisIndex: 2, yAxis: 20, lineStyle: { color: $color.downBorderColor, type: 'dashed' } }] }
            },
            // { name: 'kd-d', type: 'line', xAxisIndex: 1, yAxisIndex: 1, data: kdData.d, silent: true, lineStyle: { width: 1, color: ma10Color }, showSymbol: false },
        ],
        graphic
    })
}



</script>